<template>
  <el-row class="root-el-row">
    <el-col :span="8">
      <el-tree :data="menus" :props="{children: 'children',label: 'name'}" @node-click="handleNodeClick"
               :highlight-current="true" node-key="id"
               :expand-on-click-node="false"
               :default-expand-all="true" :indent="30" style="min-height: 800px">
         <span class="custom-tree-node" :key="data.id" slot-scope="{ node, data }">
           {{ data.name }}
        </span>
      </el-tree>
    </el-col>


    <!--  菜单项  -->
    <el-col :span="16" v-if="currentMenu">
      <el-card class="box-card"
               shadow="always"
               :body-style="{margin: '15px' }"
      >

        <div slot="header" class="clearfix">
          <span>{{ currentMenu.path }} </span>
          <span style="float: right">{{ currentMenu.name }} </span>
        </div>

        <div :class="currentMenu.authType==2?'box-card-disable':'box-card-enable'">
          <auth-object :auth-object="currentMenu.authObject" title="Api菜单权限"
          ></auth-object>
        </div>

        <el-divider></el-divider>
        <el-switch
            v-model="currentMenu.authType" :active-value="1" :inactive-value="2" :disabled="currentMenu.parentId==0"
            active-text="以自身权限为准" inactive-text="以父权限为准"
        >
        </el-switch>
        <el-button style="float: right; padding: 3px 0" type="primary" @click="submitAuths">提交修改</el-button>
      </el-card>
    </el-col>
  </el-row>

</template>

<script>
import {getApiMenuTree, updateMenuAuth} from "@/api/menu"
import AuthObject from "@/components/auth-object";

export default {
  name: "Menu",
  components: {
    AuthObject
  },
  data() {
    return {
      menus: [],
      currentMenu: null,

    };
  },
  mounted() {
    this.getMenuTree()
  },
  methods: {
    getMenuTree() {
      getApiMenuTree().then(res => {
        this.menus = res.data;
      })
    },
    handleNodeClick(data) {
      if (!data.authObject) {
        data.authObject = {
          depts: [],
          users: [],
          positions: [],
          roles: []
        }
      }
      this.currentMenu = this.copyMenu(data)
      //console.log("当前菜单为:",this.currentMenu)
    },
    copyMenu(menu) {
      return JSON.parse(JSON.stringify(menu));
    },
    submitAuths() {

      updateMenuAuth({
        id: this.currentMenu.id,
        authType: this.currentMenu.authType,
        authObject: this.currentMenu.authObject
      }).then(() => {
        //console.log("修改成功")
        this.$msgbox.alert("修改成功", "成功")
        this.getMenuTree()
      })
    }
  }
};
</script>


<style scoped lang="scss">
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix {
  height: 40px;
  font-size: 25px;
  color: #409eff;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  //width: 480px;
  min-height: 300px
}


.root-el-row {
  font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  line-height: 1.7
}

.box-card-disable {
  pointer-events: none;
  background-color: rgba(200, 200, 203, 0.6);
}

.box-card-enable {

}
</style>